import CssBaseline from '@mui/material/CssBaseline'
import useAppTheme from '@/hooks/useAppTheme'
import { useI18nEffect } from '@/hooks/useI18nEffect'
import { Box } from '@mui/material'
import MainPane from './components/Pannel/MainPane'
import Sidebar from '@/components/Slider'
import Alert from './components/Base/Alert'
import ChatEditDialog from '@/components/Dialogs/ChatEdit'
import AssistantEditDialog from '@/components/Dialogs/AssistantEdit'
import SettingDialog from '@/components/Dialogs/SettingDialog'

function Main() {
  return (
    <Box className="h-100vh w-100vw">
      <Box className="h-full w-full flex">
        <Sidebar />
        <MainPane />
      </Box>
      <Alert />
      <SettingDialog />
      <AssistantEditDialog />
      <ChatEditDialog />
    </Box>
  )
}

export default function App() {
  useI18nEffect()
  const { themeObj, ThemeProvider } = useAppTheme()

  return (
    <ThemeProvider theme={themeObj}>
      <CssBaseline enableColorScheme />
      <Main />
    </ThemeProvider>
  )
}
